<template>
  <div class="">
    <footer class="footer" v-if="list.length > 0">
      <span class="todo-count"
        ><strong>{{ isResidue }}</strong
        >剩余</span
      >
      <ul class="filters">
        <li>
          <a :class="{selected: type === 'whole'}" href="#/" @click.prevent="filter('whole')">全部</a>
        </li>
        <li>
          <a :class="{selected: type === 'active'}" href="#/active" @click.prevent="filter('active')">进行中</a>
        </li>
        <li>
          <a :class="{selected: type === 'completed'}" href="#/completed" @click.prevent="filter('completed')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" v-show="isDisplay" @click="clean">
        清除已完成
      </button>
    </footer>
  </div>
</template>
<script>
export default {
  name: 'HmFooter',
  props: {
    list: {
      type: Array,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  components: {},
  data () {
    return {}
  },
  computed: {
    // 统计未完成的任务
    isResidue () {
      return this.list.filter(item => item.isComplete === false).length
    },
    // 显示与隐藏
    isDisplay () {
      return this.list.some(item => item.isComplete)
    },
    
  },
  watch: {},
  methods: {
    clean () {
      this.$emit('clean')
    },
    filter(type) {
      this.$emit('filter', type)
    }
  }
}
</script>
<style lang="less" scoped></style>
